<template>
    <div class="mobile-page" :style="{width:'100%',margin:mTOP+'px auto 0'}">
        组件名称：< {{nameVal}}></ {{nameVal}}>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name: 'component_box',
    cname: '组件嵌入',
    icon: 'iconliulanqi',
    configName: 'c_component_box',
    type: 2, // 0 基础组件 1 营销组件 2工具组件
    defaultName: 'componentBox', // 外面匹配名称
    props: {
        index: {
            type: null
        },
        num: {
            type: null
        }
    },
    computed: {
        ...mapState('admin/mobildConfig', ['defaultArray'])
    },
    watch: {
        pageData: {
            handler(nVal, oVal) {
                this.setConfig(nVal)
            },
            deep: true
        },
        num: {
            handler(nVal, oVal) {
                let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
                this.setConfig(data)
            },
            deep: true
        },
        'defaultArray': {
            handler(nVal, oVal) {
                let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
                this.setConfig(data);
            },
            deep: true
        }
    },
    data() {
        return {
            // 默认初始化数据禁止修改
            defaultConfig: {
                name: 'componentBox',
                timestamp: this.num,
                mbConfig: {
                    title: '页面间距',
                    val: 0,
                    min: 0
                },
                // 页面间距
                nameConfig: {
                    title: '组件名称',
                    value: ''
                },
                // 图片列表
                imgConfig: {
                    title: "前端程序调用显示的图片",
                    maxList: 10,
                    list: [{
                        img: "",
                        info: [{
                                title: "简介",
                                value: "",
                                tips: "选填，前端调用",
                                max: 10,
                            },{
                                title: "链接",
                                value: "",
                                tips: "选填，页面URL",
                                max: 100,
                            }
                        ]
                    }]
                }
            },
            nameVal: '',
            mTOP: 0

        }
    },
    mounted() {
        this.$nextTick(() => {
            this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
            this.setConfig(this.pageData)
        })
    },
    methods: {
        setConfig(data) {
            if (!data) return
            this.nameVal = data.nameConfig.value;
            this.mTOP = data.mbConfig.val;
        }
    }
}
</script>
<style scoped lang="stylus">
.mobile-page 
    position relative
    padding 20px 0 
    text-align center
</style>